<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f4f4f9 0%, #e0e0e0 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            animation: fadeIn 1s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        /* 注册容器样式 */
        .register-container {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            padding: 48px;
            width: 380px;
            transform: scale(0.95);
            animation: scaleUp 0.5s ease forwards;
        }

        @keyframes scaleUp {
            to {
                transform: scale(1);
            }
        }

        /* 标题样式 */
        .register-container h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 32px;
            font-size: 28px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        /* 输入框容器样式 */
        .input-group {
            position: relative;
            margin-bottom: 24px;
        }

        /* 输入框标签样式 */
        .input-group label {
            display: block;
            margin-bottom: 8px;
            color: #666;
            font-size: 16px;
        }

        /* 输入框样式 */
        .input-group input[type="text"],
        .input-group input[type="password"] {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid #d1d8e0;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 16px;
            transition: border-color 0.3s ease;
            background-color: #fafafa;
        }

        /* 输入框聚焦样式 */
        .input-group input[type="text"]:focus,
        .input-group input[type="password"]:focus {
            border-color: #007BFF;
            outline: none;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
        }

        /* 输入框占位符样式 */
        .input-group input[type="text"]::placeholder,
        .input-group input[type="password"]::placeholder {
            color: #95a5a6;
        }

        /* 提交按钮样式 */
        .input-group input[type="submit"] {
            width: 100%;
            padding: 14px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.1s ease;
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
        }

        /* 提交按钮悬停样式 */
        .input-group input[type="submit"]:hover {
            background-color: #0056b3;
            transform: translateY(-2px);
        }

        /* 提交按钮激活样式 */
        .input-group input[type="submit"]:active {
            transform: translateY(0);
        }

        /* 返回登录链接样式 */
        .return-link {
            display: block;
            text-align: center;
            margin-top: 24px;
            color: #007BFF;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s ease;
        }

        /* 返回登录链接悬停样式 */
        .return-link:hover {
            color: #0056b3;
            text-decoration: underline;
        }
    </style>
</head>

<body>
<div class="register-container">
    <h2>注册</h2>
    <div class="input-group">
        <label for="name">账号</label>
        <input type="text" id="name" placeholder="请输入账号" name="username">
    </div>
    <div class="input-group">
        <label for="pwd">密码</label>
        <input type="password" id="pwd" placeholder="请输入密码" name="password">
    </div>
    <div class="input-group">
        <input type="submit" onclick="sub()" value="提交">
    </div>
    <!-- 获取 CSRF 参数名和令牌 -->
    <input type="hidden" id="csrfParameterName" th:name="${_csrf.parameterName}" th:value="${_csrf.parameterName}">
    <input type="hidden" id="csrfToken" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
    <a href="http://localhost:7777/login" class="return-link">返回登录</a>
</div>
<script>
    function sub() {
        var name = $("#name").val();
        var pwd = $("#pwd").val();
        var user = {
            username: name,
            password: pwd
        };
        // 获取 CSRF 参数名和令牌
        var csrfParameterName = $('#csrfParameterName').val();
        var csrfToken = $('#csrfToken').val();
        // 创建包含 CSRF 令牌的请求数据
        var requestData = {
            data: JSON.stringify(user)
        };
        requestData[csrfParameterName] = csrfToken;

        $.post("http://localhost:7777/security/register", requestData, function (data) {
            alert(data);
            if (data === "注册成功，请返回登录...") {
                window.open("http://localhost:7777/login","_self");
            }
            window.location.reload();
        });
    }
</script>
</body>

</html>